import { Column } from '@antv/g2plot';
import { useEffect } from 'react';
const data = [
  {
    type: '空闲中',
    sales: 18,
  },
  {
    type: '运输中',
    sales: 8,
  },
  {
    type: '异常中',
    sales: 2,
  },
];

const CompareChartsDemo = () => {
  useEffect(() => {
    const stackedColumnPlot = new Column('container2', {
      title: {
        visible: true,
        text: '车辆状态',
      },

      forceFit: true,
      data,
      padding: 'auto',
      data,
      xField: 'type',
      yField: 'sales',
      meta: {
        type: {
          alias: '状态',
        },
        sales: {
          alias: '数量（个）',
        },
      },
      colorField: 'type',
      color: ['blue', 'yellow', 'green'],
    });
    stackedColumnPlot.render();
  }, []);
  return <div id="container2"></div>;
};
export default CompareChartsDemo;
